<template>
  <div class="num_count">
    <div class="price">单价：￥{{price}}</div>
    <div class="count">
      <a href="javascript:;" class="delete" @click="changeNum(-1)"> - </a>
      <input type="text" readonly :value="num"/>
      <a href="javascript:;" class="add" @click="changeNum(1)"> + </a>
    </div>
    <div class="total">总金额：￥{{total}}</div>
  </div>
</template>

<script>
export default {
  name: 'NumberCount',
  props: {
    price: {
      type: Number,
      default: 300
    },
    // num: { // TODO:数量应该由父组件传过来
    //   type: Number,
    //   default: 1
    // },
    min: {
      type: Number,
      default: 1
    },
    max: {
      type: Number,
      default: 5
    }
  },
  data () {
    return {
      num: 1,
      total: 0
    }
  },
  mounted () {
    this.total = this.price * this.num
  },
  methods: {
    changeNum (num) {
      const temp = this.num + num
      if (temp < this.min || temp > this.max) return
      this.num += num
      this.total = this.price * this.num
    }
  }
}
</script>

<style lang="less" scoped>
.num_count {
  display: flex;
  .count{
    margin: 0 15px;
    a{
      width: 20px;
      font-size: 20px;
      font-weight: 600;
      cursor: pointer;
    }
    input{
      width: 50px;
      text-align: center;
    }
  }
}
</style>
